<template>
	<view>
		<view class="page_header">
			<view class="status-bar"></view>
			<view class="navtop">
				<image @click="back" src="/static/index/Back_icon.png" mode="widthFix" class="back_icon"></image>
				<text class="balancea">保证金</text>
				<!-- 右边自定义图片 -->
				<image src="../../../static/user2/yiwen.png" style="width: 34rpx;height: 34rpx;position: absolute;right:65rpx;"></image>
			</view>
		</view>
		<!-- 没加fixed -->
		<view class="status-bar"></view>
		<view class="" style="height: 100rpx ;">
		</view>
		<view v-show="isShow" class="tipsBox">
			<text class="tipsFont">
				温馨提示：请正确选择发布任务的类型，分类选择错误会导致发布审核不通过
			</text>
			<image @click="deleteBut" class="delete" src="../../../static/user2/delete.png"></image>
		</view>
		<view class="taskBox" v-for="(item,index) in taskData" :key="index">
			<image class="taskimg" :src="item.taskImg"></image>
			<text class="zhuce">{{item.zhuce}}</text>
			<text class="app">{{item.app}}</text>
			<image class="rightzjt" src="../../../static/user2/rightzjt.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow:true,
                 taskData:[{
					 taskImg:'../../../static/user2/zhuce.png',
					 zhuce:'注册类任务',
					 app:'APP,软件下载注册任务'
				 },{
					 taskImg:'../../../static/user2/zhuce.png',
					 zhuce:'投票类任务',
					 app:'微信公众号、小程序等投票'
				 },{
					 taskImg:'../../../static/user2/zhuce.png',
					 zhuce:'关注类任务',
					 app:'微信公众号、抖音、微博等关注'
				 },{
					 taskImg:'../../../static/user2/zhuce.png',
					 zhuce:'浏览类任务',
					 app:'产品、文章、视频等浏览任务'
				 },{
					 taskImg:'../../../static/user2/zhuce.png',
					 zhuce:'加分类任务',
					 app:'抖音、淘宝等增添粉丝任务'
				 },{
					 taskImg:'../../../static/user2/zhuce.png',
					 zhuce:'转发类任务',
					 app:'文章、视频等转发专栏'
				 },{
					 taskImg:'../../../static/user2/zhuce.png',
					 zhuce:'发帖类任务',
					 app:'微信、微博、QQ等发帖任务'
				 },{
					 taskImg:'../../../static/user2/zhuce.png',
					 zhuce:'评论类任务',
					 app:'公众号、抖音、微博评论类任务'
				 },{
					 taskImg:'../../../static/user2/zhuce.png',
					 zhuce:'高价任务',
					 app:'高佣金类任务'
				 }]
			};
		},
		methods:{
			deleteBut(){
				this.isShow=false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F1F1;
	}

	.balancea {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		top: 26rpx;
		left: 327rpx;
	}

	.tipsBox {
		width: 750rpx;
		height: 120rpx;
		background: rgba(115, 34, 216, 0.1);
		position: relative;
	}

	.tipsFont {
		display: block;
		width: 638rpx;
		height: 64rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(249, 88, 90, 1);
		line-height: 38rpx;
		position: absolute;
		top: 23rpx;
		left: 31rpx;
	}

	.delete {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: 30rpx;
		right: 31rpx;
	}
	.taskBox{
		width:750rpx;
		height:140rpx;
		background:rgba(255,255,255,1);
		margin-top: 1rpx;
		position: relative;
	}
	.taskimg{
		width: 54rpx;
		height: 54rpx;
		position: absolute;
		top: 43rpx;
		left: 35rpx;
	}
	.zhuce{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		position: absolute;
		top: 30rpx;
		left: 109rpx;
	}
	.app{
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(142,142,142,1);
		position: absolute;
		bottom: 30rpx;
		left: 109rpx;
	}
	.rightzjt{
		width: 14rpx;
		height: 21rpx;
		position: absolute;
		top: 60rpx;
		right: 35rpx;
	}
</style>
